<template>
    <page-wrapper>
        <table-search @search="search(1)" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-select style="width:200px;" v-model="form.alarmType" allowClear placeholder="请选择报警类型">
                        <a-select-option :value="level.value" v-for="(level,index) in alarmStatus" :key="index">{{level.name}}</a-select-option>
                    </a-select>
                </form-item>
                <form-item label="">
                    <a-select style="width:200px;" v-model="form.isDeal" allowClear placeholder="请选择处理类型">
                        <a-select-option value="0">未处理</a-select-option>
                        <a-select-option value="1">已处理</a-select-option>
                    </a-select>
                </form-item>
                <form-item label="">
                    <a-range-picker
                        v-model="time"
                        :show-time="{ format: 'HH:mm:ss' }"
                        format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['开始时间', '结束时间']"
                        :ranges="ranges"
                        allowClear
                        @change="onChangeDate"
                        />
                </form-item>
            </template>
            <template slot="extra">
                <a-button
                    class="filter-item"
                    type="primary"
                    @click="dealInfo()"
                    :disabled="!selectionBox.length || hasPerm(['liquid:history:info'])"
                    icon="check"
                    >批处理</a-button
                >
            </template>
        </table-search>
        <table-list
            :loading="loading"
            :columns="columns"
            rowKey="alarmId"
            :pagination="pagination"
            :data="list"
            :selection="selection"
        >
            <template slot="alarmType" slot-scope="{ text }">
                <field-tag
                    :value="text"
                    type="value"
                    showType="name"
                    :data="alarmStatus"
                ></field-tag>
            </template>
            <template slot="deviceCode" slot-scope="{ text }">
                <field-tag
                    :value="text"
                    type="deviceCode"
                    showType="deviceName"
                    :data="deviceBox"
                ></field-tag>
            </template>
            

            <template slot="action" slot-scope="{ text ,index}">
                <a-button size="small" type="primary" :disabled="hasPerm(['liquid:history:info']) || text.isDeal!=0" @click="dealInfo(text,index)">处理</a-button>
            </template>
        </table-list>
        
        <template v-if="isShowMark">
            <deal-log @cancel="isShowMark=false" @submit="submitLog" />
        </template>

    </page-wrapper>
</template>
<script>
import table from '@/mixins/table';
const moment = require('moment');
import {alarmStatus} from '../list/dictionary'
import {columns} from './columns'
import {remoteMonitorLogs,dealMonitorLog,updateMonitorLog} from '@/api/monitor'
import DealLog from '../list/components/dealLog.vue'
import deviceApi from '@/api/device'

export default {
    name:'MonitorLog',
    mixins:[table],
    components:{
        DealLog
    },
    data(){
        let originForm = {
            alarmType:undefined,
            isDeal:'0',
            startTime:undefined
        }
        return{
            title:"日志",
            loading:false,
            alarmStatus,
            columns,
            originForm,
            form:{
                ...originForm,
            },
            ranges: { 
                '今日': [moment(), moment()],
                '本周': [moment(), moment().endOf('week')],
                '本月': [moment(), moment().endOf('month')]
            },
            deviceBox:[],
            time:null,
            isShowMark:false,
            itemInfo:{}
        }
    },
    watch:{
        'form.startTime':function(e){
            if(!e){
                this.time = null
            }
        }
    },
    async created(){
        await this.getSource();
        this.search(1)
    },
    methods:{
        //查询列表
        async search(page){
            try{
                this.loading = true;
                if (page) {
                    this.form.page = page;
                }
                this.list = [];
                let res = await remoteMonitorLogs(this.form);
                let { list, total } = res.data;
                this.list = list;
                this.total = total;
                this.selectionBox = [];
            }finally{
                this.loading = false;
            }
        },
        //处理信息
        async dealInfo(item){

            this.$confirm({
                title: '提示',
                content: '确定要处理日志？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    try {
                        this.loading = true;
                        let ids = [];
                        if (item) {
                            ids = [item.alarmId];
                        } else {
                            let selectionBox = this.selectionBox;
                            selectionBox.map(async item => {
                                ids.push(item.alarmId);
                            });
                        }
                        await updateMonitorLog(ids);
                        this.$message.success('处理成功!');
                        this.search(1);
                    }finally{
                        this.loading = false;
                    }
                },
                onCancel() {}
            });
        },
        submitLog(e){
            let {remark} = e;

            console.log(e)
        },
        cancel(){
            this.$emit('cancel')
        },
        //选择筛选周期
        onChangeDate(x,y,z){
            if(y && y.length){
                this.form.startTime = y[0]
                this.form.endTime = y[1]
            }else{
                this.form.startTime = ''
                this.form.endTime = ''
            }
        },
        //获取相关的资源列表
        async getSource(){
            let deviceResult = await deviceApi.remoteList({page:1,size:100});
            this.deviceBox = deviceResult.data.list;
        }
    }
}
</script>